<script setup lang="ts">
import routes from '../../router/routes'
import UiMenuItem from './menu-item.vue'
import UiLogo from './logo.vue'
import { ref } from 'vue';
import { MenuInstance } from 'element-plus';

defineProps<{ collapse?: boolean }>()

const cls = 'ui-layout-aside'

const menuRef = ref<MenuInstance>()
</script>

<template>
  <aside :class="cls">
    <div :class="`${cls}_menu`">
      <ElMenu ref="menuRef" router unique-opened :collapse="collapse">
        <UiLogo :fold="collapse" />
        <div :class="`${cls}_items`">
          <ElScrollbar>
            <UiMenuItem v-for="item in routes" :key="item.path" :data="item" />
          </ElScrollbar>
        </div>
      </ElMenu>
    </div>
  </aside>
</template>

<style lang="scss">
.ui-layout-aside {
  --el-menu-bg-color: var(--aside-bg);
  --el-menu-text-color: var(--aside-text-color);
  --el-menu-hover-bg-color: var(--aside-menu-hover-bg);
  display: flex;
  flex-direction: column;
  &_menu {
    flex: 1;
    height: 0;
  }
  &_items {
    flex: 1;
    height: 0;
  }
  .el-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: none;
    &:not(.el-menu--collapse) {
      width: 220px;
    }
  }
  .el-sub-menu .el-menu {
    background-color: var(--aside-submenu-bg);
  }
  .el-sub-menu__title:hover {
    background-color: var(--aside-submenu-title-hover-bg) !important;
  }
  .el-menu--collapse .el-sub-menu__title span,
  .el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
    display: none;
  }
}
</style>
